<template>
  <div>
    <header class="bg-gray-100 shadow">
      <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold text-gray-900">{{ $route.meta.title }}</h1>
      </div>
    </header>
    <main>
      <div class="max-w-7xl mx-auto py-3 sm:px-6 lg:px-8">
        <!-- Replace with your content -->
        <div class="px-4 py-2 sm:px-0">
          <!--    page_content      -->
          <div class="grid gap-8 grid-cols-1 sm:grid-cols-4">
            <el-card>
              <template #header>
                <div>
                  <span>今日支出</span>
                </div>
              </template>
              <span class="font-bold font-mono">¥ {{ pageInfo.spendingAmountToday }}元</span>
            </el-card>

            <el-card>
              <template #header>
                <div>
                  <span>本周支出</span>
                </div>
              </template>
              <span class="font-bold font-mono">¥ {{ pageInfo.spendingAmountThisWeek }}元</span>
            </el-card>

            <el-card>
              <template #header>
                <div>
                  <span>本月支出</span>
                </div>
              </template>
              <span class="font-bold font-mono">¥ {{ pageInfo.spendingAmountThisMonth }}元</span>
            </el-card>

            <el-card>
              <template #header>
                <div>
                  <span>总支出</span>
                </div>
              </template>
              <span class="font-bold font-mono">¥ {{ pageInfo.spendingAmount }}元</span>
            </el-card>
          </div>

          <div class="grid grid-cols-1 mt-6">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>近期支出</span>
                  <el-button @click="$router.push({name: 'Spending'})" type="info" round>
                    <el-icon>
                      <component is="more"></component>
                    </el-icon>&nbsp;更多
                  </el-button>
                </div>
              </template>
              <el-table
                :data="pageInfo.topData"
                style="width: 100%">
                <el-table-column
                  min-width="120"
                  prop="type"
                  label="消费类型">
                  <template #default="scope">
                    <el-tag :type="scope.row.style" disable-transitions round>
                      <el-icon>
                        <component :is="scope.row.icon"></component>
                      </el-icon>
                      {{ scope.row.type }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  min-width="120"
                  prop="amount"
                  label="消费金额">
                  <template #default="scope">
                    <div>
                      <span class="font-extrabold font-mono">- ¥{{ scope.row.amount }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  width="180"
                  prop="spentAt"
                  label="消费时间">
                </el-table-column>
                <el-table-column
                  min-width="120"
                  prop="note"
                  label="备注">
                  <template #default="scope">
                    <div v-if="scope.row.note !== ''">
                      {{ scope.row.note }}
                    </div>
                    <div v-else>
                      无
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </div>
        </div>
        <div class="float-right px-3 sm:hidden">
          <el-affix position="bottom" :offset="50">
            <el-button @click="dialog" size="large" type="primary" round>
              <el-icon>
                <component is="promotion"></component>
              </el-icon>
              记一笔
            </el-button>
          </el-affix>
        </div>
        <!-- /End replace -->
      </div>
    </main>
    <el-dialog :width="350" v-model="dialogFormVisible" title="添加支出">
      <el-form :model="form">
        <el-form-item label="支出金额">
          <el-input-number
            type="number"
            placeholder="100.00"
            :controls="true"
            :min="0.00"
            :step="0.01"
            :precision="2"
            v-model="form.amount"/>
        </el-form-item>
        <el-form-item label="支出类型">
          <el-select v-model="form.typeId" placeholder="支出类型">
            <el-option
              v-for="type in typeList"
              :key="type.id"
              :label="type.name"
              :value="type.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input placeholder="备注" :controls="false" v-model="form.note"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogSubmit">好</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/http/request'
import {ElMessage} from "element-plus";

export default {
  name: 'Dashboard',
  data() {
    return {
      dialogFormVisible: false,
      pageInfo: {
        spendingAmountToday: 0.00,
        spendingAmountThisWeek: 0.00,
        spendingAmountThisMonth: 0.00,
        spendingAmount: 0.00,
        topData: [],
      },
      typeList: [],
      form: {
        amount: undefined,
        typeId: null,
        note: ''
      }
    }
  },
  methods: {
    getPageInfo() {
      request.getDashboardPageInfo().then(res => {
        if (res.data.status === 200) {
          this.pageInfo = res.data.result
        }
      })
    },

    dialog() {
      this.dialogFormVisible = true
      request.getTypeList().then(res => {
        this.typeList = res.data.result.typeList
      })
    },
    dialogSubmit() {
      request.addSpending(this.form.typeId, this.form.amount, this.form.note).then(res => {
        if (res.data.status === 200) {
          ElMessage.success(res.data.message)
          this.getPageInfo()
          this.dialogFormVisible = false
        } else {
          ElMessage.error(res.data.message)
        }
      })
    }

  },
  mounted() {
    this.getPageInfo()
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>